<template>
	<div class="findback-page">
        <div class="center">
            <h1 class="left">
                <img :width="69" :height="79" class="logo" :src="require('@images/logo1.png')" alt="">
                <img :width="310" :height="285" class="bg" :src="require('@images/robot.png')" alt="">
                <div class="brand fs24">慢病管理云平台</div>
            </h1>
            <div class="right">
                <div class="form">
                    <h3 class="fs30 lh200">找回密码</h3>
                    <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>

                        <div v-show="step===1">
                            <FormItem prop="account">
                                <Input type="text" :maxlength="11" v-model="formInline.account" placeholder="请输入手机号">
                                    <Icon :size="20" @click="formInline.account=''" v-if="formInline.account.length" slot="suffix" type="md-close-circle" />
                                </Input>
                                <span class="code-action active">获取验证码</span>
                            </FormItem>
                            <FormItem prop="code">
                                <Input type="text" v-model="formInline.code" placeholder="请输入验证码" />
                            </FormItem>
                        </div>
                        <div v-show="step===2">
                            <FormItem prop="password">
                                <Input :type="eye1?'text':'password'" v-model="formInline.password" placeholder="请输入新密码">
                                    <Icon :size="25" :type="eye1?'ios-eye-off':'ios-eye'" slot="suffix" @click="eye1=!eye1" />
                                </Input>
                            </FormItem>
                            <FormItem prop="password">
                                <Input :type="eye2?'text':'password'" v-model="formInline.confirmPassword" placeholder="请确认新密码">
                                    <Icon :size="25" :type="eye2?'ios-eye-off':'ios-eye'" slot="suffix" @click="eye2=!eye2" />
                                </Input>
                            </FormItem>
                        </div>

                        <div class="fun">
                            <router-link to="login">返回登录</router-link>
                        </div>
                        <FormItem>
                            <Button v-show="step===1" class="action" :loading="loading" type="primary" @click="next">下一步</Button>
                            <Button v-show="step===2" class="action" :loading="loading" type="primary" @click="handleSubmit('formInline')">确定</Button>
                        </FormItem>
                    </Form>
                </div>
            </div>
        </div>
        
    </div>
</template>
<script>
import { tokenLogin, tokenTokenRefreshToken, } from '../../api/token.js'
import {setCookie,getCookie,removeCookie,} from '../../utils/cookie.js'

export default {
	data() {
		return {
            step: 1,
			formInline: {
                account: '',
                code: '',
                password: '',
                confirmPassword: '',
            },
            eye1: false,
            eye2: false,
            checked:false,
            loading: false,
			ruleInline: {

            },
		}
    },
    mounted(){
       
    },
	methods: {
       
        next() {
            this.step = 2;
        },
		handleSubmit(name) {
			
		}
	}
}
</script>
<style lang="scss">
.findback-page{
    .action{
        width: 100%;
    }
    .center{
        width: 860px;
        background: linear-gradient(135deg,#40DEAA,#1FAD7E);
        display: flex;
        justify-content: center;
        box-shadow: 0 0 8px rgba($color: #000000, $alpha: 0.2);
        border-radius: 8px;
        overflow: hidden;
    }
    .left{
        width: 400px;
        position: relative;
        text-align: left;
        .logo{
            margin-top: 20px;
            margin-left: 20px;
        }
        .bg{
            display: block;
            margin-left: auto;
            margin-right: auto;
            margin-top: -10px;
        }
    }
    .brand{
        color: #fff;
        text-align: center;
        margin-bottom: 60px;
    }
    .right{
        flex: 1;
        padding: 80px;
        background-color: #fff;
    }
    .title{
        img{
            margin-right: 10px;
        }
        line-height: 300%;
        color: #fff;
        vertical-align: middle;
    }
    .ivu-form-item{
        width: 100%;
        margin-top: 20px;
    }
    .ivu-input{
        outline: 0 none;
        border-radius: 0;
        width: 100%;
        border: 0 none;
        border-bottom: 1px solid #d7dde4;
    }
    .ivu-input:focus{
        border-bottom-color: var(--active);
        box-shadow: none;
    }
    .ivu-input:hover{
        border-bottom-color: var(--active);
        box-shadow: none;
    }
    .fun{
        display: flex;
        justify-content: center;
    }
    h3{
        color: var(--active);
        text-align: center;
    }
    .ivu-input-group-append{
        background: transparent;
        border: 0 none;
    }
    .ivu-form-item-content{
        position: relative;
        .code-action{
            position: absolute;
            right: 0;bottom: 0;
            z-index: 999;
            color: var(--active);
        }
    }
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
